<template>
  <div class="body-page">
    <div class="input-data">
      <el-form ref="form" :model="form" :rules="rules" label-width="240px">
        <el-steps :active="activeTab-1" align-center>
          <el-step hide-timestamp placement="top" v-for="(item,index) in dataTabs" :title="item.label"
                   :key="item.dataTabs">
          </el-step>
        </el-steps>
        <el-card class="form-data">
          <el-row>
            <el-col :span="12">
              <el-form-item label="农产品名称" prop="agroProductName" v-if="activeTab===1"
                            :required="activeTab===1 ? true : false">
                <el-input v-model="form.agroProductName" placeholder="请输入农产品名称" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="农产品类别" prop="agroProductType" v-if="activeTab===1"
                            :required="activeTab===1 ? true : false">
                <el-select v-model="form.agroProductType" placeholder="请选择农产品类别" style="width: 300px">
                  <el-option v-for="dict in getDictDatas(DICT_TYPE.AGRO_REVIEW_PRODUCT_TYPE)" :key="dict.value"
                             :label="dict.label" :value="parseInt(dict.value)"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="农产品产地" prop="agroProductOrigin" v-if="activeTab===5"
                            :required="activeTab===5 ? true : false">
                <el-input v-model="form.agroProductOrigin" placeholder="请输入农产品产地" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="农产品制造商" prop="agroProductManufacturer"
                            v-if="activeTab===5" :required="activeTab===5 ? true : false">
                <el-input v-model="form.agroProductManufacturer" placeholder="请输入农产品制造商"
                          style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="农产品价格" prop="agroProductPrice" v-if="activeTab===5"
                            :required="activeTab===5 ? true : false">
                <el-input v-model="form.agroProductPrice" placeholder="请输入农产品价格" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="农产品重量" prop="agroProductWeight" v-if="activeTab===5"
                            :required="activeTab===5 ? true : false">
                <el-input v-model="form.agroProductWeight" placeholder="请输入农产品重量" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="储存方式" prop="storageMethod" v-if="activeTab===1"
                            :required="activeTab===1 ? true : false">
                <el-select v-model="form.storageMethod" placeholder="请选择储存方式" style="width: 300px">
                  <el-option v-for="dict in getDictDatas(DICT_TYPE.AGRO_REVIEW_STORAGE_METHOD)" :key="dict.value"
                             :label="dict.label" :value="parseInt(dict.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="包装方式" prop="packagingMethod" v-if="activeTab===1"
                            :required="activeTab===1 ? true : false">
                <el-select v-model="form.packagingMethod" placeholder="请选择包装方式" style="width: 300px">
                  <el-option v-for="dict in getDictDatas(DICT_TYPE.AGRO_REVIEW_PACKAGING_METHOD)"
                             :key="dict.value"
                             :label="dict.label" :value="parseInt(dict.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="储存时间" prop="storageTime" v-if="activeTab===1">
                <el-date-picker clearable v-model="form.storageTime" type="date" value-format="timestamp"
                                placeholder="选择储存时间" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="农产品描述" prop="agroProductDescribe" v-if="activeTab===1">
                <el-input type="textarea" v-model="form.agroProductDescribe" placeholder="请输入农产品描述"
                          style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产日期" prop="produceDate" v-if="activeTab===5">
                <el-date-picker clearable v-model="form.produceDate" type="date" value-format="timestamp"
                                placeholder="选择生产日期" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="环境监测类别" prop="environmentMonitoringType"
                            v-if="activeTab===3" :required="activeTab===3 ? true : false">
                <el-select v-model="form.environmentMonitoringType" placeholder="请选择环境监测类别"
                           style="width: 300px">
                  <el-option v-for="dict in getDictDatas(DICT_TYPE.AGRO_REVIEW_ENVIRONMENT_MONITORING_TYPE)"
                             :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="环境监测方式" prop="environmentMonitoringMethod"
                            v-if="activeTab===3" :required="activeTab===3 ? true : false">
                <el-select v-model="form.environmentMonitoringMethod" placeholder="请选择环境监测方式"
                           style="width: 300px">
                  <el-option v-for="dict in getDictDatas(DICT_TYPE.AGRO_REVIEW_ENVIRONMENT_MONITORING_METHOD)"
                             :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="环境监测负责人" prop="environmentMonitoringPerson"
                            v-if="activeTab===3" :required="activeTab===3 ? true : false">
                <el-input v-model="form.environmentMonitoringPerson" placeholder="请输入环境监测负责人"
                          style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="环境监测结果" prop="environmentMonitoringResult"
                            v-if="activeTab===3" :required="activeTab===3 ? true : false">
                <el-radio-group v-model="form.environmentMonitoringResult">
                  <el-radio v-for="dict in getDictDatas(DICT_TYPE.AGRO_REVIEW_ENVIRONMENT_MONITORING_RESULT)"
                            :key="dict.value" :label="parseInt(dict.value)">{{ dict.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="环境监测开始时间" prop="environmentMonitoringStartTime"
                            v-if="activeTab===3">
                <el-date-picker clearable v-model="form.environmentMonitoringStartTime" type="date"
                                value-format="timestamp" placeholder="选择环境监测开始时间" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="环境监测结束时间" prop="environmentMonitoringEndTime"
                            v-if="activeTab===3">
                <el-date-picker clearable v-model="form.environmentMonitoringEndTime" type="date"
                                value-format="timestamp" placeholder="选择环境监测结束时间" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产视频监控地址" prop="produceVideoMonitorUrl"
                            v-if="activeTab===4" :required="activeTab===4 ? true : false">
                <el-input v-model="form.produceVideoMonitorUrl" placeholder="请上传生产视频监控地址"
                          style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产视频监控时间" prop="produceVideoMonitorTime"
                            v-if="activeTab===4">
                <el-date-picker clearable v-model="form.produceVideoMonitorTime" type="date" style="width: 300px"
                                value-format="timestamp" placeholder="选择生产视频监控时间"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="质量检测机构" prop="qualityTestOrganization"
                            v-if="activeTab===6" :required="activeTab===6 ? true : false">
                <el-input v-model="form.qualityTestOrganization" placeholder="请输入质量检测机构"
                          style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="质量检测负责人" prop="qualityTestPerson"
                            v-if="activeTab===6"
                            :required="activeTab===6 ? true : false">
                <el-input v-model="form.qualityTestPerson" placeholder="请输入质量检测负责人"
                          style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="质量检测方式" prop="qualityTestMethod"
                            v-if="activeTab===6"
                            :required="activeTab===6 ? true : false">
                <el-select v-model="form.qualityTestMethod" placeholder="请选择质量检测方式" style="width: 300px">
                  <el-option v-for="dict in getDictDatas(DICT_TYPE.AGRO_REVIEW_QUALITY_TEST_METHOD)"
                             :key="dict.value"
                             :label="dict.label" :value="parseInt(dict.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="质量检测项目与依据" prop="qualityTestProjectBasis"
                            v-if="activeTab===6" :required="activeTab===6 ? true : false">
                <el-input v-model="form.qualityTestProjectBasis" placeholder="请输入质量检测项目与依据"
                          type="textarea"
                          style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="质量检测结果" prop="qualityTestResult"
                            v-if="activeTab===6"
                            :required="activeTab===6 ? true : false">
                <el-radio-group v-model="form.qualityTestResult">
                  <el-radio v-for="dict in getDictDatas(DICT_TYPE.AGRO_REVIEW_QUALITY_TEST_RESULT)"
                            :key="dict.value"
                            :label="parseInt(dict.value)">{{ dict.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="送检日期" prop="qualityTestSamplingTime" v-if="activeTab===6">
                <el-date-picker clearable v-model="form.qualityTestSamplingTime" type="date"
                                value-format="timestamp"
                                placeholder="选择送检日期" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="质量检测日期" prop="qualityTestTime" v-if="activeTab===6">
                <el-date-picker clearable v-model="form.qualityTestTime" type="date" value-format="timestamp"
                                placeholder="选择质量检测日期" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <div class="agro-input-data">
              <el-table :data="inputData" style="width: 100%" border v-if="activeTab===2">
                <el-table-column prop="inputName" label="投入品名称" align="center">
                  <template v-slot="scope">
                    <el-input v-model="scope.row.inputName" placeholder="请输入投入品名称"/>
                  </template>
                </el-table-column>
                <el-table-column prop="inputType" label="投入品类别" align="center">
                  <template v-slot="scope">
                    <el-select v-model="scope.row.inputType" placeholder="请选择投入品类别">
                      <el-option v-for="dict in getDictDatas(
                      DICT_TYPE.AGRO_INPUT_TYPE
                    )" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="inputDescribe" label="投入品描述" align="center">
                  <template v-slot="scope">
                    <el-input v-model="scope.row.inputDescribe" placeholder="请输入投入品描述"/>
                  </template>
                </el-table-column>
                <el-table-column prop="inputPrice" label="投入品价格" align="center">
                  <template v-slot="scope">
                    <el-input v-model="scope.row.inputPrice" placeholder="请输入投入品价格"/>
                  </template>
                </el-table-column>
                <el-table-column prop="inputTime" label="投入时间" align="center">
                  <template v-slot="scope">
                    <el-date-picker v-model="scope.row.inputTime" value-format="timestamp" type="date"/>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="180">
                  <template v-slot="scope">
                    <el-button size="mini" type="text" icon="el-icon-plus"
                               @click="addInput(scope.row)"></el-button>
                    <el-button size="mini" type="text" icon="el-icon-minus"
                               @click="reduceInput(scope.$index, scope.row)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-row>
          <div class="btn-form">
            <el-button type="primary" :disabled="activeTab===1 ? true : false" @click="backInputData">上一步</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button type="primary" :disabled="activeTab===6 ? true : false" @click="nextInputData">下一步</el-button>
          </div>
        </el-card>
      </el-form>
    </div>
  </div>
</template>

<script>

import {createReview, getReview, updateReview} from '@/api/agro/review'
import {DICT_TYPE, getDictDatas} from '@/utils/dict'

export default {
  components: {},
  name: 'edit',
  data() {
    return {
      type: 'edit',
      //数据层面（全部）
      dataTabs: getDictDatas(DICT_TYPE.AGRO_REVIEW_DATA_TAB),
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        agroProductName: [
          { required: true, message: '农产品名称不能为空', trigger: 'change' }
        ],
        agroProductType: [
          { required: true, message: '农产品类别不能为空', trigger: 'change' }
        ],
        storageMethod: [
          { required: true, message: '储存方式不能为空', trigger: 'change' }
        ],
        packagingMethod: [
          { required: true, message: '储存方式不能为空', trigger: 'change' }
        ]
      },
      inputData: [{}],
      activeTab: 1,
      title: ''
    }
  },
  watch: {
    activeTab() {
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    }
  },
  mounted() {
    this.type = this.$route.query.type
    const id = this.$route.query.id
    if (this.type === 'edit') {
      getReview(id).then(resp => {
        this.form = resp.data
        this.inputData = resp.data.inputUpdateReqVOS
        if (this.form.pollingType != null) {
          this.activeTab = this.form.pollingType
        }
      })
    }
  },
  methods: {
    //表单校验
    checkForm() {
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      if (this.activeTab === 1) {
        this.rules = {
          agroProductName: [
            { required: true, message: '农产品名称不能为空', trigger: 'change' }
          ],
          agroProductType: [
            { required: true, message: '农产品类别不能为空', trigger: 'change' }
          ],
          storageMethod: [
            { required: true, message: '储存方式不能为空', trigger: 'change' }
          ],
          packagingMethod: [
            { required: true, message: '储存方式不能为空', trigger: 'change' }
          ]
        }
      } else if (this.activeTab === 5) {
        this.rules = {
          agroProductOrigin: [
            { required: true, message: '农产品产地不能为空', trigger: 'change' }
          ],
          agroProductManufacturer: [
            { required: true, message: '农产品制造商不能为空', trigger: 'change' }
          ],
          agroProductPrice: [
            { required: true, message: '农产品价格不能为空', trigger: 'change' }
          ],
          agroProductWeight: [
            { required: true, message: '农产品重量不能为空', trigger: 'change' }
          ]
        }
      } else if (this.activeTab === 3) {
        this.rules = {
          environmentMonitoringType: [
            { required: true, message: '环境监测类别不能为空', trigger: 'change' }
          ],
          environmentMonitoringMethod: [
            { required: true, message: '环境监测方式不能为空', trigger: 'change' }
          ],
          environmentMonitoringPerson: [
            { required: true, message: '环境监测负责人不能为空', trigger: 'change' }
          ],
          environmentMonitoringResult: [
            { required: true, message: '环境监测结果不能为空', trigger: 'change' }
          ]
        }
      } else if (this.activeTab === 4) {
        this.rules = {
          produceVideoMonitorUrl: [
            { required: true, message: '生产视频监控地址不能为空', trigger: 'change' }
          ]
        }
      } else if (this.activeTab === 6) {
        this.rules = {
          qualityTestPerson: [
            { required: true, message: '质量检测负责人不能为空', trigger: 'change' }
          ],
          qualityTestOrganization: [
            { required: true, message: '质量检测机构不能为空', trigger: 'change' }
          ],
          qualityTestResult: [
            { required: true, message: '质量检测结果不能为空', trigger: 'change' }
          ],
          qualityTestProjectBasis: [
            { required: true, message: '质量检测项目与依据不能为空', trigger: 'change' }
          ],
          qualityTestMethod: [
            { required: true, message: '质量检测方式不能为空', trigger: 'change' }
          ]
        }
      } else {
        this.rules = {}
      }
    },
    //上一步
    backInputData() {
      this.activeTab = this.activeTab - 1
    },
    //下一步
    async nextInputData() {
      await this.checkForm()
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.activeTab = this.activeTab + 1
      })
    },
    /** 添加投入品 */
    addInput() {
      this.inputData.push({})
    },
    /** 移除投入品 */
    reduceInput() {
      if (this.inputData.length > 1) {
        this.inputData.pop()
      }
    },
    /** 提交按钮 */
    async submitForm() {
      await this.checkForm()
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        // 修改的提交
        if (this.form.id != null) {
          this.form.inputUpdateReqVOS = this.inputData
          this.form.pollingType = this.activeTab + 1
          updateReview(this.form).then(response => {
            if (this.activeTab < 6) {
              this.activeTab = this.activeTab + 1
            }
            this.$modal.msgSuccess('修改成功')
            this.$tab.closeOpenPage({ path: '/agro/review/index' })
          })
        } else {
          // 添加的提交
          this.form.inputCreateReqVOS = this.inputData
          this.form.pollingType = this.activeTab + 1
          createReview(this.form).then(response => {
            if (this.activeTab < 6) {
              this.activeTab = this.activeTab + 1
            }
            this.$modal.msgSuccess('新增成功')
            this.$tab.closeOpenPage({ path: '/agro/review/index' })
          })
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.input-data {
  padding: 24px;
  margin: auto;
  width: 80%;

  .form-data {
    margin-top: 20px;
    padding:30px 20px;
    height: 1000px;
    position: relative;
    .btn-form {
      position: absolute;
      bottom: 100px;
      left: 43%;
    }
    .el-button{
      margin-left: 20px;
    }
  }

}

.body-page {
  width: 100%;
  min-height: 1203px;
  background: rgb(245, 247, 250);
}
</style>
